<template>

    <!--  下拉刷新-->
    <van-pull-refresh v-model="isLoading"
                      :head-height="80"
                      @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img class="doge"
             src="../assets/0.png"
             :style="{ transform: `scale(${props.distance / 80})` }" />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge"
             src="../assets/0.png" />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img class="doge"
             src="../assets/1111.gif" />
      </template>
        <router-view></router-view>
      <Footer></Footer>
      <nut-drag direction="y" :style="{left:'0px',bottom:'48px'}">
        <nut-fixednav :active.sync="myActive" type="left">
          <ul slot="list" class="fixed-list">
            <li @click="$router.push({path:'/2048'})">
              <img src="../assets/2048.png" alt="">
              <p>2048</p>
            </li>
            <li @click="$router.push({path:'/turntable'})">
              <img src="../assets/images/mo.png"
                   alt="">
              <p>大转盘</p>
            </li>
            <li @click="$router.push({path:'/robot'})">
              <img src="../assets/robot.gif" alt="">
              <p>哒哒</p>
            </li>
<!--            <li @click="$router.push({path:'/book'})">-->
<!--              <img src="../assets/book.webp" alt="">-->
<!--              &lt;!&ndash;              <p>答案之书</p>&ndash;&gt;-->
<!--            </li>-->
          </ul>
          <template slot="btn" @click="myActive=!myActive">
            <span>
              <img src="../assets/dog.gif" alt="">
            </span>
          </template>
        </nut-fixednav>
      </nut-drag>
    </van-pull-refresh>
</template>

<script>

import Footer from "@/components/Footer";

export default {
  name: "Index",
  data() {
    return {
      //下拉刷新
      isLoading: false,
    //  侧边导航栏
      myActive: false,

    }
  },
  components: {
    Footer,
    // NoLogin,
  },
  methods: {
    click() {
      this.$router.push({ path: '/turntable' })
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        //强制刷新
        this.$router.go(0)
      }, 1000);
    },
  },
}
</script>

<style scoped lang="less">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
/deep/.nut-fixednav ul.fixed-list{
  height: 55px;
  >li{
    width: 50px;
    >img{
      width: 30px;
      height: 30px;
    }
    >P{
      color: #000;
      font-size: 10px;
    }
  }
}

/deep/.fixed-btn{
  background:transparent !important;
  border: 0px  !important;
  box-shadow: 0 0 0 0  !important;
}
.nut-fixednav{
  width: 240px;
}
.nut-fixednav .fixed-btn>span{
  width: 80px;
  >img{
    width: 100%;
  }
}
</style>